<template>
  <div>
    <div class="cl"></div>
    <div class="footer">
      <div class="footer-top">
        <div class="container">
          <div class="inline-service">
            <div class="inline">
              <span class="el-icon-service"></span>
              <p>在线客服</p>
            </div>
            <div class="user">
              <span class="el-icon-chat-dot-round"></span>
              <p>用户反馈</p>
            </div>
          </div>
          <div class="qr-code">
            <img src="@/assets/images/qrcode.png" alt="">
            <div class="busi-info">
              <p>扫描二维码</p>
              <p>关注德亨信息</p>
              <p>微信公众号</p>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="container">
          <div class="three-td">
            <ul>
              <li><img src="@/assets/images/footer1.png" alt="">30天无忧退换货</li>
              <li><img src="@/assets/images/footer2.png" alt="">满88元免邮费</li>
              <li><img src="@/assets/images/footer3.png" alt="">平台品质保证</li>
            </ul>
          </div>
          <div class="as">
            <a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">诚聘英才</a> | <a href="">隐私政策</a> | <a href="">法律申明</a>
            <p>粤ICP备112345521号   Copyright © 2005-2019 XXXXXXXX 版权所有</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'footerCommd'
}
</script>

<style scoped lang="scss">
  .footer-top {
    background: #fff;
    height: 230px;
    border-top: 1px solid $tBgcolor;

    .inline-service {
      float: left;

      .inline,.user {
        float: left;
        width: 110px;
        height: 125px;
        text-align: center;
        border: 1px solid #ccc;
        margin: 10px;
        margin-top: 47px;

        &:hover {
          color: $redColor;
          border: 1px solid $redColor;
        }

        span {
          font-size: 3em;
          margin-top: 20px;
        }

        p {
          line-height: 50px;
          font-size: 1.4em;
        }
      }
    }

    .qr-code {
      float: right;
      margin-top: 70px;
      margin-right: 40px;

      img {
        float: left;
        width: 100px;
        margin-right: 10px;
      }

      .busi-info {
        float: left;
        line-height: 2.5em;
      }
    }
  }

  .footer-bottom {
    background: $sBgColor;
    height: 210px;
    color: #fff;

    .three-td {
      text-align: center;
      padding: 30px 0;
      border-bottom: 1px solid $qBgColor;
      ul {
        li {
          display: inline-block;
          list-style: none;
          line-height: 55px;
          margin-right: 60px;

          img {
            border: 2px solid #fff;
            border-radius: 50%;
            padding: 10px;
            margin-right: 20px;
            float: left;
          }
        }
      }
    }

    .as {
      text-align: center;
      margin: 10px 0;
      color: $tBgcolor;

      p {
        margin: 20px 0;
      }

      a {
        color: $tBgcolor;
        margin: 0 20px;
        text-decoration: none;
      }
    }
  }
</style>
